<template>
 <el-icon v-if="iconType=='el-text'" :size="size" :color="color"  :style="style">
    <component :is="elName"></component>
 </el-icon>
 <el-icon v-else-if="iconType=='el-comp'" :size="size" :color="color"  :style="style">
    <component :is="elName"></component>
    
 </el-icon>
  
<!-- 字节图标 -->
<icon-park v-else-if="iconType=='byte'" :type="byteName" :size="size" :fill="color" :theme="theme" :style="style"/>
  
<!-- 阿里图标使用 -->
<el-icon v-else-if="iconType=='ali'" :size="size" :color="color" :style="style">
  <svg aria-hidden="true">
    <use v-bind:xlink:href="`#${aliName}`"></use>
  </svg>  
</el-icon>

<!-- iconify图标 -->
<icon v-else-if="iconType=='ify'"  :icon="ifyName" :width="size" :color="color" :style="style" />

</template>

<!-- 
前期需要安装：@icon-park/vue-next和iconify/vue
并使用全局注册方式


说明：
 size：大小  默认为: 23px
 color:颜色  默认值: #333
 theme：主题 只有字节图标才有的属性，可选值: 'outline' | 'filled' | 'two-tone' | 'multi-color'
 
 案例：
 element plus图标vue2中的使用方式
 <base-icon el-name="el-icon-delete" color="red" ></base-icon>
  element plus 图标组件化使用方式
 <base-icon el-name="House"></base-icon> 
 阿里的 iconfont图标使用方式
 <base-icon ali-name="ali-icon-caidan" color="blue"></base-icon>
 字节跳动的iconPark 图标使用方式
 <base-icon byte-name="bookmark" color="yellow"></base-icon>
 iconify图标使用方式
 <base-icon ify-name="ic:baseline-5g" color="green"></base-icon>
 -->

<script>
  import {IconPark} from '@icon-park/vue-next/es/all';
  import { Icon } from '@iconify/vue';
  export default {
    components:{
      IconPark,
      Icon
    },
    props:{
      elName:{
        type:String
      },
      aliName:{
        type:String
      },
      byteName:{
        type:String
      },
      ifyName:{
        type:String
      },
      svgName:{
        type:String
      },
      size:{
        type:[String,Number],
        default:'23px'
      },
      color:{
        type:String,
        default:'#333'
      },
      theme:{
        type:String,
        default:'outline'
      },
      style:{
        type:String
      }
    },
    data(){
      return{
        
      }
    },
    computed:{
      iconType(){
        let result="el-comp"
        if(this.elName!=undefined&&this.elName!=''){
         if(this.elName.startsWith("el")){
           result="el-text"
         }else{
           result="el-comp"
         }
        }else if(this.aliName!=undefined&&this.aliName!=''){
          result="ali"
        }else if(this.byteName!=undefined&&this.byteName!=''){
          result="byte"
        }else if(this.ifyName!=undefined&&this.ifyName!=''){
          result="ify"
        }
        else if(this.svgName!=undefined&&this.svgName!=''){
          result="svg"
        }
        console.log(result)
        return result;
      }
    },
   
    
  }
</script>

<style>

  .icon-base {
    width: 24px;
    height: 24px;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;  
  }
  
.svgClass {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    outline: 0;
}
</style>